<template>
    <div class="qf-login orange-page">
        <a href="#" id="loginLogo"></a>
        <div class="container">
            <div class="qf-login-broadcast fl">
                <div class="broadcast-txt">
                    <p>助力经纪人快速客户报备</p>
                    <p>实时了解最新成交与分佣情况</p>
                    <p>将提高经纪人工作效率</p>
                </div>
            </div>
            <div class="qf-login-form fl">
                <div class="qf-login-title">忘记密码</div>
                <div class="login-form">
                    <div class="qf-input-box">
                        <div class="input-icon fl">
                            <div class="input-icon-img1"></div>
                        </div>
                        <div class="qf-input fl">
                            <input type="text" name="phone" v-model="phone" placeholder="请输入手机号" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="11" v-bind:readonly="isReadOnly">
                        </div>
                    </div>
                    <div class="qf-input-box">
                            <div class="input-icon fl">
                                <div class="input-icon-img2"></div>
                            </div>
                            <div class="qf-input fl" style="width:150px">
                                <input type="text" name="password" v-model="code" placeholder="请输入验证码">
                            </div>
                            <div class="fl" style="width:100px;margin-top: 6px;">
                                <button class="validate-btn"  @click="sendVerificationCode" v-bind:disabled="codeDis">{{verificationCode}}</button>
                            </div>
                    </div>
                </div>
                <div class="validate-confirm">
                    <a class="reset-btn fl" @click="fogetPassword">确定</a>
                    <a class="reset-btn" style="float:right" @click="cancel" >取消</a>
                </div>
                <div class="qf-login-footer" style="margin-top:50px">上海巧房信息科技有限公司</div>
            </div>
        </div>
        <resetPassword v-bind:phoneModal="phone"></resetPassword>
    </div>
</template>

<script>
    import resetPassword from './resetPassword.vue'
    export default {
        data() {
            return {
                verificationCode:'发送验证码',
                phone:'',
                code:'',
                codeDis:false,
                isReadOnly:false
            }
        },
        components:{
            resetPassword
        },
        watch:{
        	 phone:function(newVal,oldVal){
                var _self = this;
                if(newVal==window.sessionStorage.getItem("phone")){
        			_self.isReadOnly = true;
        		}
            }
        },
        mounted: function() {
            this.initPage();
            this.getCompanyLogo();
            //初始化数据
          //  this.verificationCodeTimer(true);
            //this.loadCompany();
        },
        activated:function(){
            //初始化数据
           // this.verificationCodeTimer(true);
        },
        methods: {
            getCompanyLogo: function () {
                var _self = this;
                var url = _self.utilHelper.apiUrl + "/api/getLogo";
                var domain = window.location.href;
                var params = {"params":{'logoType': '7'}}
                _self.$http.post(url, params).then((response) => {
                    var data = response.body;
                    if (data.result=='1') {
                        //_self.logoUrl = data.resData;
                        $("#loginLogo").addClass("logo");
                        $("#loginLogo").css("backgroundImage","url("+data.resData.logoUrl+")");
                    }else{
                        $("#loginLogo").addClass("logo");
                    }
                })
            },
            initPage() {
                // 设置高度
                var oMain = $(".sign-content");
                var oHeight = $(window).height();
                if(oHeight > 973) {
                    oMain.css("height", "973px");
                } else if(oHeight < 800) {
                    oMain.css("height", "800px");
                } else {
                    oMain.css("height", oHeight + "px");
                }
            },
            //发送验证码
            sendVerificationCode:function(){
                var _self = this;
                //验证手机号
                if(!_self.phone){
                    layer.msg("请填写手机号");
                    return;
                }
                if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(_self.phone))){
                    layer.msg("手机号码格式错误");
                    return;
                }
                //设置不能点击
                _self.codeDis = "disabled";
                _self.isReadOnly=true;
                var params = {
                    phone:_self.phone
                };
                window.sessionStorage.setItem("phone",_self.phone);
                //  layer.msg("短信发送成功，请注意查收");
                var body = {};
                body.params = params;
                var url = this.utilHelper.apiUrl+'/api/sendValidateCodeForPwd';
                _self.$http.post(url,body).then((response) => {
                    var body = response.body.resData;
                    if(body.result == 1){
                        layer.alert(body.resultMsg,{icon:6});
                        _self.verificationCodeTimer(false);
                    }else{
                        _self.codeDis = false;
                        _self.isReadOnly=false;
                        layer.alert(body.resultMsg,{icon:5});
                    }
                }),(response => {
                    _self.codeDis = false;
                    layer.alert("发送短信异常",{icon:5});

                });
            },
            //短信验证码定时器
            verificationCodeTimer:function(flag){
                var _self = this;
                var date = 0;
                if(flag){//页面刷新，或重进入时
                    if(window.sessionStorage.getItem("verification")){//若缓存中不存在数据则 不进行倒计时
                        date =  window.sessionStorage.getItem("verification");
                        if(window.sessionStorage.getItem("resetPhone")){
                            _self.phone = window.sessionStorage.getItem("resetPhone");
                            _self.isReadOnly = true;
                        }
                    }else{
                        return;
                    }
                }else{//点击发送按钮时
                    date = new Date().getTime() +1000*180;
                    window.sessionStorage.setItem("verification",date);
                    window.sessionStorage.setItem("resetPhone",_self.phone);
                    _self.timer = 120;
                }

                _self.codeDis = "disabled";
                var code = setInterval(function(){
                    _self.timer = Math.ceil((date - new Date().getTime())/1000);//向上取整数
                    if(_self.timer <= 0 ){
                        window.sessionStorage.removeItem("verification");
                        window.sessionStorage.removeItem("resetPhone");
                        _self.verificationCode = '发送验证码';
                        _self.codeDis = false;
                        _self.isReadOnly=false;
                        window.clearInterval(code);
                    }else{
                        _self.verificationCode = _self.timer + 'S';
                        _self.timer-=1;
                    }
                },1000);
            },
            //重置密码
            fogetPassword:function(){
                var _self = this;
                //验证手机号
                if(!_self.phone){
                    layer.msg("请填写手机号");
                    return;
                }
                if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(_self.phone))){
                    layer.msg("请填写正确的手机号");
                    return;
                }
                if(!_self.code){
                    layer.msg("验证码不能为空");
                    return;
                }

                var params = {
                		params:{
                			phone:_self.phone,
                    		code:_self.code
                		}
                	};
                var url = this.utilHelper.apiUrl+'/api/resetPwd';
                _self.$http.post(url,params).then((response) => {
                    var body = response.body.resData;
                    if(body.result == 1){
                        $('#resetPwd').modal('show');
                        // layer.alert(body.resultMsg, {icon: 6},function(index){
                        //     layer.close(index);
                            
                        // });
                        _self.verificationCodeTimer(false);
                    }else{
                        layer.alert(body.resultMsg,{icon: 5});
                    }
                }),(response => {
                    layer.alert('重置密码异常',{icon: 5});
                });
            },
            //取消
            cancel(){
                this.$router.push({path:"/login"})
            }
        }
    }
</script>
<style>
    .validate-code-box{width:298px;height:44px;line-height:44px;margin: 0 auto;margin-bottom:18px;}
    .validate-code-input{width:180px;height:44px;line-height:44px;border: 1px solid #b2b2b2;  border-radius: 23px; background: #fff}
    .validate-code-input input{border:none;width:105px;height:20px;line-height:20px;}
    .validate-btn{display:block;border-radius:10px;color:#fff;font-size:14px;text-align:center;margin:0 auto;cursor:pointer;width: 100px;height:30px;line-height:35px;background: #f87242;border: none}
    .validate-confirm{display:block;border-radius:23px;width:298px;height:44px;line-height:44px;color:#fff;font-size:26px;text-align:center;margin:0 auto;margin-top:60px;}
    .reset-btn{display:block;border-radius:26px;color:#fff;font-size:26px;text-align:center;margin:0 auto;cursor:pointer;width: 135px;height:44px;line-height:44px;background: #f87242;border: none}
</style>